<template>
	<view class="page" :style="pageStyle">
		<view v-if="showAd" style="width: 250px; height: 250px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;">
			<u-icon @click="closeAd" name="close" style="position: absolute; top:4%;right: 4%; z-index: 99999;"></u-icon>
			<u-image :src="imgSrc" width="250px" height="250px" showMenuByLongpress="true" @click="previewImg"></u-image>
		</view>
		<!-- 广告 -->
		<!-- <card @closeAd="closeAd()" v-if="showShadow"></card> -->
		<view style="padding: 30rpx;">
			<uni-collapse class="list" @change="openinvalidSelect()">
						<uni-collapse-item title-border="none" name="key1" :border="false" :showArrow="false" class="box"
							style="background-color: #f8f8f8;" @click="openThis()">
							<template v-slot:title>
								<view class="head">
									<view>考试将开始</view>
									<u-icon name="arrow-down" color="#909399" :class="{ 'u-arrow-down-icon-active': openList }"
										class="u-arrow-down-icon icon">
									</u-icon>
								</view>
							</template>
							<view v-if="haveData" class="card" v-for="(item,index) in list" :key="index">
								<view class="content">
									<view class="title">{{item.name}}</view>
									<view class="interval">
										<view class="iconfont icon-shijian" style="margin-right: 2rpx;"></view>
										<view>时间：</view>
										<view>{{item.interval}} </view>
									</view>
									<view class="place">
										<view class="iconfont icon-didian"></view>
										<view>地点：</view>
										<view>{{item.place}}</view>
									</view>
								</view>
								<view class="commom time" :style="'background-color:' + color[index % 5]">
									<view class="number">{{item.countDownDay}}</view>
									<view class="text">{{item.unit}}</view>
								</view>
							</view>
							<view v-if="!haveData" class="tip">
								<view class="iconfont icon-ye" style="color:#FFD700;font-size: 55rpx;"></view>
								<view>暂无考试安排!</view>
							</view>
						</uni-collapse-item>
						<uni-collapse-item title-border="none" name="key2" :border="false" :showArrow="false" class="box"
							style="background-color: #f8f8f8;" :open="!haveData">
							<template v-slot:title>
								<view class="head">
									<view>考试已结束</view>
									<u-icon name="arrow-down" color="#909399"
										style="flex;"
										:class="{ 'u-arrow-down-icon-active': openOver }" class="u-arrow-down-icon icon">
									</u-icon>
								</view>
							</template>
							<view class="card" v-for="(item1,index1) in overList" :key="index1">
								<view class="content">
									<view class="title">{{item1.name}}</view>
									<view class="interval">
										<view class="iconfont icon-shijian" style="margin-right: 2rpx;"></view>
										<view>时间：</view>
										<view>{{item1.interval}} </view>
									</view>
									<view class="place">
										<view class="iconfont icon-didian"></view>
										<view>地点：</view>
										<view>{{item1.place}}</view>
									</view>
								</view>
								<view class="commom over">
									<view>已结束</view>
								</view>
							</view>
			<!-- 				<countDownCard :list="overList"></countDownCard> -->
						</uni-collapse-item>
					</uni-collapse>
		</view>

		<!-- 		<view v-if="!haveData" class="tip">
			<view class="iconfont icon-ye" style="color:#FFD700;font-size: 55rpx;"></view>
			<view>暂无考试安排!</view>
		</view> -->
	</view>
</template>

<script>
	let interstitialAd = null;
	import countDownCard from "../components/countDownCard/countDownCard.vue"
	import card from "../../components/card/card.vue"
	export default {
		name: 'countDown',
		onLoad() {
			// if (Math.floor((Math.random()*100)+1)%3 === 0) {
			//                 this.showAd = false
			//         }
			uni.getStorage({
				key: 'imgSrc',
				success: (res) => {
					console.log(1)
					const arr = JSON.parse(res.data);
					this.imgSrcArr = arr
					this.imgSrc = this.imgSrcArr[0]
					const img = this.imgSrcArr.shift()
					this.imgSrcArr.push(img)
					uni.setStorage({
						key: 'imgSrc',
						data: JSON.stringify(this.imgSrcArr),
						success: function () {
							console.log('success');
						}
					});
				},
				fail: () => {
					console.log(3)
					this.imgSrc = this.imgSrcArr[0]
					const img = this.imgSrcArr.shift()
					this.imgSrcArr.push(img)
					uni.setStorage({
						key: 'imgSrc',
						data: JSON.stringify(this.imgSrcArr),
						success: function () {
							console.log('success');
						}
					});
				}
			});
		},
		created() {
			let that = this;
			// let num = Math.round(Math.random()); //获取随机数为 0 / 1
			// console.log(num)
			// if (num) {
			// 	// this.showShadow = true;
				

			// } else {
			// 	// this.showShadow = false;
			// }
			setTimeout(() => {
				that.interstitialShow(0)
			},300)
			uni.showLoading({
			   title: '加载中..',
			   mask: true
			});
			this.getCountDown();
			this.getOverCountDown();
			uni.getSystemInfo({
				success: function(res) {
					let pxToRpxScale = 750 / res.windowWidth;
					that.height = res.windowHeight * pxToRpxScale;
				}
			});
		},
		onHide() {
			// console.log("onHide监听页面隐藏")
			if (interstitialAd) {
				interstitialAd = null;
			}
		},
		data() {
			return {
				list: [], //列表数据
				overList: [], //结束的课程列表
				value: 'key2',
				showAd:true,
				imgSrc: '',
				imgSrcArr: ['http://1.14.247.152:9797/images/饿了么.jpg', 'http://1.14.247.152:9797/images/美团.jpg'],
				color: ["#f25753", "#8DB6CD", "#EE9A00", "#AB82FF", "#B3B3B3"],
				haveData: false,
				height: 0,
				openList: false, // 箭头指向
				openOver: false,
				showShadow: false
			}
		},
		components: {
			countDownCard,
			card
		},
		computed: {
			pageStyle() {
				if (this.showShadow) {
					return 'overflow: hidden; height:' + this.height + 'rpx';
				} else {
					// console.log('改变')
					return ' height:' + this.height + 'rpx';
				}
			}
		},
		methods: {
			interstitialShow(times) { //显示插屏广告
				var that = this;
				setTimeout(() => {
					if (interstitialAd) {
						// console.log('插屏广告正在显示....');
						interstitialAd.show().catch((err) => {
							// console.error("插屏广告显示失败：", err);
							switch (err.errCode) {
								case 2001:
									//打开小程序一定时间内不允许展示
									that.interstitialShow(1000);
									break;
								case 2002:
									//距离小程序插屏广告或者激励视频广告上次播放时间间隔不足，不允许展示插屏广告
									that.interstitialShow(1000);
									break;
								default:
									break;
							}
						})
					}
				}, times)
			},
			changeData(item) {
				//处理时间
				var countTime
				var unitTemp
				if (item.countDownHour >= 24) {

					var curTime = new Date();
					var curDay = curTime.getFullYear() + '-' + (curTime.getMonth() + 1) + '-' + curTime
						.getDate()
					var addHour = curTime.setHours(curTime.getHours() + item.countDownHour);

					var thatTime = new Date(addHour)
					var thatDay = thatTime.getFullYear() + '-' + (thatTime.getMonth() + 1) + '-' +
						thatTime.getDate()
					var aDate, oDate1, oDate2, iDays
					aDate = curDay.split("-")
					oDate1 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]) //转换为12-18-2002格式 
					aDate = thatDay.split("-")
					// console.log(oDate1)
					oDate2 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0])
					iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24)

					countTime = iDays
					unitTemp = '天'
				} else {
					countTime = item.countDownHour
					unitTemp = 'h'
				}

				//处理时间间隔
				let tempIndex = item.startTime.indexOf('T');
				let date = item.startTime.slice(0, tempIndex);
				let startTime = item.startTime.slice(tempIndex + 1, item.startTime.length - 3)
				let endTime = item.endTime.slice(tempIndex + 1, item.startTime.length - 3);

				//临时数据
				let itemData = {
					name: item.name,
					countDownDay: countTime,
					// countDownDay: Math.ceil(item.countDownHour / 24),
					interval: '',
					place: item.location,
					unit: unitTemp
				};
				itemData.interval = date + ' ' + startTime + '-' + endTime;
				return itemData;
			},
			async getCountDown() {
				let that = this;
				let header = new Object()
				header.Authority = uni.getStorageSync("Authority")
				let {
					data
				} = await getApp().UniRequest("/countDown/authority/getCountDownMes", "Get", "", header);
				// console.log(data)
				if (data.data.length != 0) {
					let tempData = data.data;
					tempData.forEach((item, index) => {
						that.list.push(that.changeData(item))
					})
					this.haveData = true;
					// console.log(this.list)
				} else {
					this.haveData = false
				}
				uni.hideLoading();
			},
			async getOverCountDown() {
				let that = this;
				let header = new Object()
				header.Authority = uni.getStorageSync("Authority")
				let {
					data
				} = await getApp().UniRequest("/countDown/authority/getPastMes", "Get", "", header);
				// console.log(data)
				if (data.data.length != 0) {
					let tempData = data.data;
					tempData.forEach((item, index) => {
						that.overList.push(that.changeData(item))
					})
					// console.log('数据', this.overList)
				} else {
				}
				uni.hideLoading();
			},
			
			openinvalidSelect(e) {
				if (e === 'key1') {
					this.openList = true;
				}else if(e === 'key2') {
					this.openOver = true;
				} else if (e === '' && this.openList) {
					this.openList = false
				} else if (e === '' && this.openOver) {
					this.openOver = false
				}

			},
			closeAd() {
				this.showAd=false;
			},
			
			previewImg() {
			                let _this = this;
			                let imgsArray = [];
			                imgsArray[0] = this.imgSrc
			                uni.previewImage({
			                    current: 0,
			                    urls: imgsArray
			                });
			}
		}

	}
</script>

<style lang="less">
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.page {
		/deep/ .u-image {
			
			// border-radius: 35px !important;
			
			.u-image__image {
				border-radius: 25px !important;
			}
		}
		
		width: 100%;
		// height: 504px;
		background-color: #f8f8f8;
		
		position: relative;

		.u-arrow-down-icon {
			transition: all 0.3s;
			margin-right: 20rpx;
			margin-left: 14rpx;
		}

		.u-arrow-down-icon-active {
			transform: rotate(180deg);
			transform-origin: center center;
		}

		.head {
			height: 80rpx;
			display: flex;
			font-size: 35rpx;
			align-items: center;
			background-color: #f8f8f8;
			position: relative;

			.icon {
				position: absolute;
				right: 0rpx;

				font-size: inherit;
			}
		}

		.card {
			width: 100%;
			// height: 230rpx;
			display: flex;
			// margin: 20rpx;
			background-color: #FFFFFF;
			box-shadow: 1rpx 1rpx 10rpx #D9D9D9;
			border-radius: 25rpx;
			margin-bottom: 25rpx;
			position: relative;
			
			.content {
				flex: 2.8;
				height: 100%;
				text-align: center;
				.title {
					padding-left: 20rpx;
					margin-top: 10rpx;
					width: 100%;
					font-size: 35rpx;
					font-weight: 700;

				}

				.interval {
					display: flex;
					text-align: center;
					margin-left: 20rpx;
					margin-top: 20rpx;
					font-size: 30rpx;
					color: #6E6E6E;
				}

				.place {
					display: flex;
					margin: 25rpx 0rpx 25rpx 20rpx;
					color: #6E6E6E;
				}
			}

			.commom {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx;
				color: #FFFFFF;
				border-top-right-radius: 25rpx;
				border-bottom-right-radius: 25rpx;
				text-align: center;
			}

			.over {
				font-size: 34rpx;
				background-color: #B3B3B3
			}

			.time {
				flex: 1;
				background-color: #f25753;

				.number {
					flex: 4;
					font-size: 80rpx;
					// line-height: 230rpx;
				}

				.text {
					flex: 1;
					font-size: 35rpx;
					// line-height: 260rpx;
				}
			}
		}

		.tip {
			display: flex;
			// width:500rpx;
			height: 200rpx;
			font-size: 40rpx;
			justify-content: center;
			align-items: center;
			background-color: #f8f8f8;
		}
	}
</style>
